import React, {Component} from "react";
import {produce} from 'immer'
import classnames from 'classnames'
import './index.css'


export default class Comment extends Component {

  state = {
    // 当前用户
    content: '',
    user: {
      name: '清风徐来',
      vip: true,
      avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png'
    },
    // 评论列表
    comments: [
      {
        id: 100,
        name: '__RichMan',
        avatar: 'https://r1.ykimg.com/051000005BB36AF28B6EE4050F0E3BA6',
        content: '这阵容我喜欢😍靳东&闫妮，就这俩名字，我就知道是良心剧集...锁了🔒',
        time: '2021/10/12 10:10:23',
        vip: true,
        collect: false
      },
      {
        id: 101,
        name: '糖蜜甜筒颖',
        avatar: 'https://image.9xsecndns.cn/image/uicon/712b2bbec5b58d6066aff202c9402abc3370674052733b.jpg',
        content: '突围神仙阵容 人民的名义第三部来了 靳东陈晓闫妮秦岚等众多优秀演员实力派 守护人民的财产 再现国家企业发展历程',
        time: '2021/09/23 15:12:44',
        vip: false,
        collect: true
      },
      {
        id: 102,
        name: '清风徐来',
        avatar: 'https://static.youku.com/lvip/img/avatar/310/6.png',
        content: '第一集看的有点费力，投入不了，闫妮不太适合啊，职场的人哪有那么多表情，一点职场的感觉都没有',
        time: '2021/07/01 00:30:51',
        vip: true,
        collect: false
      }
    ]
  }

  changeContent = e => {
    if (this.state.content.length <= 100) {
      this.setState(produce(state => {
        state.content = e.target.value
      }))
    }
  }


  onSubmit = e => {
    const content = {
      id: Math.random(),
      ...this.state.user,
      content: this.state.content,
      time: new Date().toLocaleString(),
      collect: false
    }
    this.setState(produce(state => {
      state.comments.unshift(content)
      state.content = ''
    }))
  }

  delComment = id => () => {
    this.setState(produce(state => {
      state.comments = state.comments.filter(item => item.id !== id)
    }))
  }

  changeCollect = id => () => {
    this.setState(produce(state => {
      const currentContent = state.comments.find(item => item.id === id)
      currentContent.collect = !currentContent.collect
    }))
  }

  render() {
    return (
      <div className="comments">
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea onChange={this.changeContent} value={this.state.content} placeholder="爱发评论的人，运气都很棒"/>
          <div className="foot">
            <div className="word">{this.state.content.length}/100</div>
            <div className="btn" onClick={this.onSubmit}>发表评论</div>
          </div>
        </div>
        <h3 className="comm-head">
          热门评论<sub>(5)</sub>
        </h3>
        <ul className="comm-list">
          {
            this.state.comments.map(item => (
              <li className="comm-item">
                <div className="avatar" style={{backgroundImage: `url(${item.avatar})`}}>

                </div>
                <div className="info">
                  <p className="name vip">
                    {item.name}
                    {item.vip && <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"/>}
                  </p>
                  <p className="time">
                    {item.time}
                    <span
                      onClick={this.changeCollect(item.id)}
                      className={classnames('iconfont', ` icon-collect${item.collect ? '-sel' : ''}`)}
                    />
                    {item.name === this.state.user.name &&
                      <span onClick={this.delComment(item.id)} className="del">删除</span>}
                  </p>
                  <p>
                    {item.content}
                  </p>
                </div>
              </li>
            ))
          }
        </ul>
      </div>
    );
  }
}
